import { BaseScene } from './BaseScene'
import { GameUtils } from '../utils/GameUtils'

export class SettingsScene extends BaseScene {
  constructor(game) {
    super(game)
    
    // 设置选项
    this.settings = {
      sound: true,
      music: true,
      vibration: true
    }
    
    // UI元素
    this.buttons = {
      back: {
        x: 20,
        y: 20,
        width: 60,
        height: 60,
        text: '返回'
      }
    }
    
    // 设置项
    this.settingItems = [
      {
        key: 'sound',
        text: '音效',
        x: 50,
        y: 200
      },
      {
        key: 'music',
        text: '音乐',
        x: 50,
        y: 300
      },
      {
        key: 'vibration',
        text: '振动',
        x: 50,
        y: 400
      }
    ]
    
    // 初始化触摸事件
    this.initTouchEvents()
  }
  
  init() {
    // 从游戏状态管理器加载设置
    const savedSettings = this.game.getStateManager().getSettings()
    if (savedSettings) {
      this.settings = { ...savedSettings }
    }
    
    // 初始化触摸事件
    this.initTouchEvents()
    
    // 应用当前设置
    this.applySettings()
  }
  
  render(ctx) {
    // 绘制背景
    GameUtils.drawBackground(ctx, this.game.getSize())
    
    // 绘制标题
    GameUtils.drawText(ctx, '设置', this.game.getSize().width / 2, 100, 40)
    
    // 绘制设置项
    this.settingItems.forEach(item => {
      // 绘制设置文本
      GameUtils.drawText(ctx, item.text, item.x, item.y, 30)
      
      // 绘制开关
      this.drawToggle(ctx, item.x + 200, item.y, this.settings[item.key])
    })
    
    // 绘制返回按钮
    const backBtn = this.buttons.back
    GameUtils.drawButton(ctx, backBtn.text, backBtn.x, backBtn.y, backBtn.width, backBtn.height)
  }
  
  drawToggle(ctx, x, y, isOn) {
    const width = 100
    const height = 40
    const radius = height / 2
    
    // 绘制背景
    ctx.fillStyle = isOn ? '#4CAF50' : '#9E9E9E'
    ctx.beginPath()
    ctx.roundRect(x, y - height/2, width, height, radius)
    ctx.fill()
    
    // 绘制滑块
    ctx.fillStyle = '#FFFFFF'
    ctx.beginPath()
    ctx.arc(
      x + (isOn ? width - radius : radius),
      y,
      radius - 2,
      0,
      Math.PI * 2
    )
    ctx.fill()
  }
  
  initTouchEvents() {
    this.game.getContext().canvas.addEventListener('touchstart', this.onTouchStart.bind(this))
  }
  
  onTouchStart(e) {
    const touch = e.touches[0]
    const rect = this.game.getContext().canvas.getBoundingClientRect()
    const x = touch.clientX - rect.left
    const y = touch.clientY - rect.top
    
    // 检查设置项点击
    this.settingItems.forEach(item => {
      if (x >= item.x + 200 && x <= item.x + 300 &&
          y >= item.y - 20 && y <= item.y + 20) {
        this.toggleSetting(item.key)
      }
    })
    
    // 检查返回按钮点击
    const backBtn = this.buttons.back
    if (x >= backBtn.x && x <= backBtn.x + backBtn.width &&
        y >= backBtn.y && y <= backBtn.y + backBtn.height) {
      this.goBack()
    }
  }
  
  toggleSetting(key) {
    this.settings[key] = !this.settings[key]
    
    // 播放音效
    if (key === 'sound' && this.settings.sound) {
      this.game.getResourceManager().playSound('toggle')
    }
    
    // 振动反馈
    if (key === 'vibration' && this.settings.vibration) {
      this.game.getResourceManager().vibrate()
    }
    
    // 应用设置
    this.applySettings()
    
    // 保存设置
    this.game.getStateManager().saveSettings(this.settings)
  }
  
  applySettings() {
    const resourceManager = this.game.getResourceManager()
    
    // 设置音效
    if (this.settings.sound) {
      resourceManager.enableSound()
    } else {
      resourceManager.disableSound()
    }
    
    // 设置音乐
    if (this.settings.music) {
      resourceManager.playBGM()
    } else {
      resourceManager.stopBGM()
    }
  }
  
  goBack() {
    this.game.getStateManager().switchScene('lobby')
  }
  
  destroy() {
    // 移除事件监听
    this.game.getContext().canvas.removeEventListener('touchstart', this.onTouchStart)
  }
} 